<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ModianVisitorLogApi } from '#/api/moxi/modianvisitorlog';
import { getModianVisitorLogPage } from '#/api/moxi/modianvisitorlog';
import dayjs from 'dayjs';
import { ref } from 'vue';

import { confirm, DocAlert, Page, useVbenDrawer } from '@vben/common-ui';

import { Card, message } from 'ant-design-vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { $t } from '#/locales';
import { DICT_TYPE, getDictLabel } from '#/utils';

import { useGridColumns, useGridFormSchema } from './data';


import Form from './modules/form.vue';

const [FormDrawer, formDrawerApi] = useVbenDrawer({
    connectedComponent: Form,
    destroyOnClose: true,
});

/** 刷新表格 */
function onRefresh() {
    gridApi.query();
}

/** 编辑用户 */
function handleEdit(row: ModianVisitorLogApi.ModianVisitorLog) {
    console.log($t('common.edit'));
    formDrawerApi.setData(row).open();
}

const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
    records,
}: {
    records: ModianVisitorLogApi.ModianVisitorLog[];
}) {
    checkedIds.value = records.map((item) => item.id as number);
}

// /** 更新用户状态 */
// async function handleStatusChange(
//   newStatus: number,
//   row: ModianVisitorLogApi.ModianVisitorLog,
// ): Promise<boolean | undefined> {
//   return new Promise((resolve, reject) => {
//     confirm({
//       content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
//     })
//       .then(async () => {
//         // 更新用户状态
//         const res = await updateUserStatus(row.id as number, newStatus);
//         if (res) {
//           // 提示并返回成功
//           message.success($t('ui.actionMessage.operationSuccess'));
//           resolve(true);
//         } else {
//           reject(new Error('更新失败'));
//         }
//       })
//       .catch(() => {
//         reject(new Error('取消操作'));
//       });
//   });
// }

const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
        schema: useGridFormSchema(),
    },
    gridOptions: {
        columns: useGridColumns(),
        height: 'auto',
        keepSource: true,
        proxyConfig: {
            ajax: {
                query: async ({ page }, formValues) => {
                    const params = {
                        pageNo: page.currentPage,
                        pageSize: page.pageSize,
                        visitorName: formValues.visitorName,
                    };
                    if (formValues.allTime) {
                        (params as any).startTime = dayjs(formValues.allTime[0]).valueOf();
                        (params as any).endTime = dayjs(formValues.allTime[1]).valueOf();
                    }
                    return await getModianVisitorLogPage(params);
                },
            },
        },
        rowConfig: {
            keyField: 'id',
            isHover: true,
        },
        toolbarConfig: {
            refresh: { code: 'query' },
            search: true,
        },
    } as VxeTableGridOptions<ModianVisitorLogApi.ModianVisitorLog>,
    gridEvents: {
        checkboxAll: handleRowCheckboxChange,
        checkboxChange: handleRowCheckboxChange,
    },
});
</script>

<template>
    <Page auto-content-height>
        <FormDrawer @success="onRefresh" />
        <ResetPasswordDrawer @success="onRefresh" />
        <AssignRoleDrawer @success="onRefresh" />
        <ImportDrawer @success="onRefresh" />
        <Grid table-title="用户列表">
            <template #actions="{ row }">
                <TableAction :actions="[
                    {
                        label: '查看',
                        type: 'link',
                        icon: ACTION_ICON.VIEW,
                        auth: ['system:user:update'],
                        onClick: handleEdit.bind(null, row),
                    },
                ]" />
            </template>
        </Grid>


    </Page>
</template>
